<template>
	<view class="list-view">
		<view class="top-bar"><uni-navbar :show="show" @click-show="show = !show" :fixed="true" :back="true" color="#fff" title="title"></uni-navbar></view>

		<view class="ttl-box">
			<view class="con-ttl">
				<view class="banner" @click="listTo"><image src="/static/img/tti_01.png" mode="widthFix"></image></view>
				<view class="bg-img"><image src="/static/img/index_bg01.png" mode="widthFix"></image></view>
			</view>
		</view>

		<!-- <view class="search-view"><u-search class="search-input" shape="square" bg-color="#fff" v-model="station.stationName" :show-action="false" @search="search" placeholder="请输入联络站名称"></u-search></view> -->

		<view class="list-box">
			<view class="list-info_02" v-for="(item, index) of stationList" :key="item.id" @click="navTo('/pagesA/condi/site_detail?id=' + item.id)">
				<view class="right">
					<image class="image" :src="linksImg(item.exp2)" mode="aspectFill"></image>
				</view>
				<view class="left">
					<view class="info-title">{{ item.stationName }}</view>
					<view class="info-btm">
						<text class="left-name">站内代表数：{{ item.userNum }}</text>
					</view>
				</view>
			</view>
			<u-loadmore :status="loading" />
		</view>

		<!-- <image src="/static/img/icon_list.png" mode="widthFix" class="tianbao" @click="listTo"></image> -->
		<u-back-top :scroll-top="scrollTop" top="200"></u-back-top>
	</view>
</template>

<script>
import dateTimePicker from '@/components/uni-datetime-picker';
import { mapState } from 'vuex';
export default {
	components: {
		dateTimePicker
	},
	data() {
		return {
			title: '民意直通车',
			scrollTop: 0,
			show: false,
			tabName: '',
			tabIndex: '',
			tabsCurrent: 0,
			tabsList: [],
			statusMap: {
				0: '所有'
			},
			colorMap: {
				1: '#0099ff',
				2: '#ff9900',
				3: '#19be6b'
			},
			id: '',

			startTime: '',
			endTime: '',

			deptList: [],
			stationInfo: '',
			stationList: [],
			station: {
				stationName: '',
				deptId: ''
			},
			loading: 'loadmore'
		};
	},
	onLoad(option) {
		this.loadLogin();

		if (option && option.status) {
			if (option.status == 1) {
				this.tabsCurrent = 1;
			}
			if (option.status == 2) {
				this.tabsCurrent = 2;
			}
		}
		this.loadData();
		// this.loadDict('station_category', 'typeList');
	},
	onPullDownRefresh() {
		this.loadData('refresh');
	},
	onReachBottom() {
		if (this.loading == 'loadmore') this.loadData('add');
	},
	onPageScroll(res) {
		this.scrollTop = res.scrollTop;
	},
	computed: {
		dateRangeSea: {
			get: function () {
				let time = this.startTime + ' - ' + this.endTime;
				if (this.startTime == '' || this.endTime == '') {
					return '';
				} else {
					return time;
				}
			},
			set: function (e) {
				this.startTime = '';
				this.endTime = '';
			}
		},
		...mapState(['userInfo'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.sysUser) {
				this.clientCode = this.userInfo.sysUser.clientCode;
				this.userId = this.userInfo.sysUser.id;

				this.pageNum = 1;
				this.pageSize = 10;
			} else {
				this.$logout();
			}
		},
		loadDict(type, list) {
			this.$request('/system/sys-dict/dictList', {
				clientCode: this.clientCode,
				sysDict: {
					dictType: type
				}
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this[list] = [];
				res.data.forEach((item) => {
					this[list].push({
						value: item.dictValue,
						label: item.dictName
					});
				});
			});
		},
		loadDept() {
			this.$request('/system/sys-dept/depts', {
				clientCode: this.clientCode,
				changweihui: '1'
			}).then((res) => {
				if (!res.data) {
					return false;
				}
				this.deptList = [];
				res.data.forEach((item) => {
					this.deptList.push({
						id: item.id,
						value: item.id,
						label: item.deptName
					});
				});

				if (this.deptList.length > 0) {
					this.tabName = this.deptList[0].label;
					this.tabIndex = this.deptList[0].id;
					this.station.deptId = this.deptList[0].id;
					this.loadData();
				}
			});
		},
		loadData(type = 'add') {
			if (this.loading == 'loading') {
				return false;
			}
			if (type == 'add') {
				if (this.loading == 'nomore') {
					return false;
				}
				this.loading = 'loading';
			} else {
				this.loading = 'loading';
			}
			if (type != 'add') {
				this.pageNum = 1;
			}
			let data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				userId: this.userId,
				clientCode: this.clientCode,
				stationInfo: {
					clientCode: this.clientCode,
					...this.station
				}
			};
			let url = '/system/station/list';

			this.$request(url, data, {
				load: true
			}).then((res) => {
				let count = 0;
				if (type != 'add') {
					uni.stopPullDownRefresh();
					this.stationList = [];
				}
				this.loading = this.pageNum < Math.ceil(res.data.total / this.pageSize) ? 'loadmore' : 'nomore';
				this.pageNum = this.pageNum + 1;
				this.stationList = this.stationList.concat(res.data.records);

				this.loaded = true;
				if (this.stationList.length <= 0) {
					this.loading = 'nodata';
				}
			});
		},
		tab(item) {
			this.tabName = item.label;
			this.tabIndex = item.id;
			this.station.deptId = item.id;

			if (['奎文区', '潍城区', '诸城市'].indexOf(this.tabName) == -1) {
				this.loadData('refresh');
			}
		},
		tabsChange(index, id) {
			this.tabsCurrent = index;
			this.loadData('refresh');
		},
		search(e) {
			this.station.stationName = e;
			this.loadData('refresh');
		},
		upper(e) {
			this.loadData('refresh');
		},
		lower(e) {
			if (this.loading == 'loadmore') this.loadData('add');
		},
		call(e) {
			uni.makePhoneCall({
				phoneNumber: e.contactsPhone
			});
		},
		listTo() {
			uni.navigateTo({
				url: '/pagesA/condi/list'
			});
		},
		miniProgramTo(appId, path) {
			let op = {
				appId: appId,
				path: path || '/pages/index/index',
				extraData: {
					// scene: this.syncId
				},
				envVersion: 'release', // trial
				success: (res) => {
					console.log(res);
				}
			};
			console.log(op);
			uni.navigateToMiniProgram(op);
		},
		mapTo(e) {
			let geography = e.stationCoordinate.split(',');
			let res = this.$bd09_to_gcj02(geography[0], geography[1]);

			uni.openLocation({
				name: e.stationName,
				address: e.stationAddress,
				latitude: res.lat,
				longitude: res.lng,
				success: () => {
					console.log('success');
				}
			});
			return false;
		},
		linksImg(url) {
			if (url) {
				return this.$baseUrl + '/file/download/preview/0?path=' + url.replace(/\\/g, '/');
			} else {
				return this.$staticImgRandom('/static/img/default_big.png');
			}
		},
		navTo(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style lang="scss">
.ttl-box {
	// text-align: center;

	.con-ttl {
		position: relative;
		padding: 12rpx 24rpx 8rpx;
		// height: 500rpx;
	}

	.h1 {
		position: relative;
		font-size: 18px;
		font-weight: 600;
		color: #fff;
		line-height: 64rpx;
		z-index: 1;
	}

	.h1-img {
		position: relative;
		margin: 250rpx auto 0;
		width: 706rpx;
		height: 216rpx;
		z-index: 1;

		.image {
			width: 706rpx;
			height: 216rpx;
		}
	}

	.bg-img {
		position: absolute;
		left: 0;
		bottom: 132rpx;
		width: 100%;
	}
}

.banner {
	position: relative;
	margin: 0 auto;
	padding: 0;
	min-height: 316rpx;
	z-index: 10;
}

.tab-box {
	padding: 10rpx 0;
	font-size: 14px;
	color: #666;
	line-height: 60rpx;
	overflow-x: auto;
	border-bottom: 20rpx solid $u-border-color;
	background-color: #fff;

	& + .tab-box {
		padding-top: 0;
	}

	.search-filter {
		margin: 0 30rpx;
		width: 120rpx;
		height: 60rpx;
		float: right;
		text-align: center;
		border-radius: 6rpx;
		background-color: #e6e7e8;
	}

	.title {
		padding: 0 30rpx;
		float: left;
		font-weight: bold;
	}
}

.tab-nav {
	flex-wrap: wrap;
	padding: 0 14rpx;
	border: 0;
	background-color: #fff;

	&:after {
		content: '';
		flex-shrink: 0;
		width: 20rpx;
		height: 1rpx;
	}

	.tab-item {
		flex-shrink: 0;
		margin: 10rpx;
		padding: 4rpx 20rpx;
		max-width: inherit;
		width: auto;
		height: 68rpx;
		color: #666;
		text-align: center;
		border-radius: 10rpx;
		background-color: #e6e7e8;
	}

	.tab-item.active {
		font-weight: bold;
		color: #fff;
		background-color: #e5231a;
	}
}

.tab-info-box {
	padding: 70rpx;
	text-align: center;
	background-color: #fff;

	.image {
		margin: 0 auto 26rpx;
		width: 180rpx;
		height: 188rpx;
	}

	.h2 {
		margin-bottom: 64rpx;
		font-size: 18px;
		font-weight: bold;
		color: #333;
		line-height: 50rpx;
	}

	.btn {
		width: 420rpx;
	}
}

.list-box {
	padding: 0 30rpx;
	background-color: #fff;

	.list-info_02 {
		.right {
			margin: 0 20rpx 0 0;
		}
	}
}

.tianbao {
	display: block;
	position: fixed;
	right: 40rpx;
	bottom: 270rpx;
	width: 160rpx;
	height: 160rpx;
}

.filter-box {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
}

.form-box {
	.form-item {
		@include mp-flex;
	}
}

.fiexd-btm {
	position: fixed;
	left: 242rpx;
	bottom: 30rpx;
}
</style>
